<%@ page contentType="text/html;charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>

<!DOCTYPE html>
<html>
<head>
    <title>${product.name} - 淘乐乐商城</title>
    <style>
        .product-detail {
            max-width: 1200px;
            margin: 20px auto;
            padding: 20px;
            background: white;
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        }
        
        .product-container {
            display: flex;
            gap: 40px;
        }
        
        .product-images {
            flex: 0 0 400px;
        }
        
        .product-images img {
            width: 100%;
            border-radius: 8px;
        }
        
        .product-info {
            flex: 1;
        }
        
        .product-name {
            font-size: 24px;
            margin-bottom: 20px;
        }
        
        .product-price {
            color: #ff4d4f;
            font-size: 28px;
            margin-bottom: 20px;
        }
        
        .original-price {
            color: #999;
            text-decoration: line-through;
            font-size: 16px;
            margin-left: 10px;
        }
        
        .product-description {
            color: #666;
            line-height: 1.6;
            margin: 20px 0;
        }
        
        .action-buttons {
            display: flex;
            gap: 20px;
            margin-top: 30px;
        }
        
        .buy-now-btn, .add-to-cart-btn {
            padding: 12px 30px;
            border: none;
            border-radius: 4px;
            font-size: 16px;
            cursor: pointer;
            transition: background 0.3s;
        }
        
        .buy-now-btn {
            background: #ff4d4f;
            color: white;
        }
        
        .buy-now-btn:hover {
            background: #ff6b6b;
        }
        
        .add-to-cart-btn {
            background: #fff1f0;
            color: #ff4d4f;
            border: 1px solid #ff4d4f;
        }
        
        .add-to-cart-btn:hover {
            background: #ffd4d4;
        }
        
        .quantity-selector {
            display: flex;
            align-items: center;
            margin-bottom: 20px;
        }
        
        .quantity-selector button {
            width: 36px;
            height: 36px;
            border: 1px solid #ddd;
            background: white;
            cursor: pointer;
        }
        
        .quantity-selector input {
            width: 60px;
            height: 36px;
            text-align: center;
            border: 1px solid #ddd;
            border-left: none;
            border-right: none;
        }
    </style>
</head>
<body>
    <%@ include file="header.jsp" %>
    
    <div class="product-detail">
        <div class="product-container">
            <div class="product-images">
                <img src="images/${product.image}" alt="${product.name}">
            </div>
            
            <div class="product-info">
                <h1 class="product-name">${product.name}</h1>
                
                <div class="product-price">
                    ¥<fmt:formatNumber value="${product.price * product.discount}" pattern="#.00"/>
                    <span class="original-price">¥<fmt:formatNumber value="${product.price}" pattern="#.00"/></span>
                </div>
                
                <div class="product-description">
                    ${product.description}
                </div>
                
                <div class="quantity-selector">
                    <span>数量：</span>
                    <button onclick="updateQuantity(-1)">-</button>
                    <input type="number" id="quantity" value="1" min="1" max="${product.stock}">
                    <button onclick="updateQuantity(1)">+</button>
                    <span>库存：${product.stock}</span>
                </div>
                
                <div class="action-buttons">
                    <button onclick="buyNow()" class="buy-now-btn">立即购买</button>
                    <button onclick="addToCart()" class="add-to-cart-btn">加入购物车</button>
                </div>
            </div>
        </div>
    </div>
    
    <script>
        function updateQuantity(delta) {
            const input = document.getElementById('quantity');
            const newValue = parseInt(input.value) + delta;
            if (newValue >= 1 && newValue <= ${product.stock}) {
                input.value = newValue;
            }
        }
        
        function buyNow() {
            const quantity = document.getElementById('quantity').value;
            const orderData = {
                productId: ${product.productId},
                productName: '${product.name}',
                quantity: parseInt(quantity),
                price: ${product.price},
                discount: ${product.discount},
                totalAmount: ${product.price} * ${product.discount} * quantity
            };
            
            sessionStorage.setItem('orderData', JSON.stringify(orderData));
            window.location.href = 'payment.jsp';
        }
        
        function addToCart() {
            const quantity = document.getElementById('quantity').value;
            fetch('cart/add', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded'
                },
                body: new URLSearchParams({
                    productId: ${product.productId},
                    quantity: quantity
                })
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    alert('已添加到购物车！');
                } else {
                    alert(data.message || '添加失败，请重试');
                }
            })
            .catch(error => {
                console.error('Error:', error);
                alert('添加失败，请重试');
            });
        }
    </script>
    
    <%@ include file="footer.jsp" %>
</body>
</html> 